<template>
  <div class="main">
    <div style="background: #ececec; padding: 30px">
      <a-space direction="vertical">
      <a-row class="ant-row" style="margin-left: -3px; margin-right: -3px; row-gap: 6px;">
        <a-col class="ant-col" :span="6" style="padding-left: 3px; padding-right: 3px;" v-for="item in injectorstates">
          <a-card>
            <a-statistic :title="item.State" :value="item.Interval" suffix="秒" :value-style="{ color: '#3f8600' }"
              style="margin-right: 50px">
              <template #prefix>
                <!-- <ArrowUpOutlined /> -->
                <PieChartOutlined />
              </template>

            </a-statistic>
            <div>{{ dayjs(item.DateTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
          </a-card>
        </a-col>
  
      </a-row>
      <a-row class="ant-row" style="margin-left: -3px; margin-right: -3px; row-gap: 6px;">
        <a-col class="ant-col" :span="6" style="padding-left: 3px; padding-right: 3px;"
          v-for="item in edgeInjectorstates">

          <a-card>
            <a-statistic :title="item.State" :value="item.Interval" suffix="秒" :value-style="{ color: '#3f8600' }"
              style="margin-right: 50px">
              <template #prefix>
                <LineChartOutlined />

              </template>

            </a-statistic>
            <div>{{ dayjs(item.DateTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
          </a-card>
        </a-col>
      </a-row>
    </a-space>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '/@/store/modules/user';
import useMqtt from '/@/utils/mqtt'
import { ArrowUpOutlined, ArrowDownOutlined, PieChartOutlined, LineChartOutlined } from '@ant-design/icons-vue';
import dayjs from 'dayjs'
const { startMqtt } = useMqtt()
const userStore = useUserStore()
const router = useRouter()
const injectorstates = ref([])
const edgeInjectorstates = ref([])
const systemstates = ref([])
// startMqtt(['/aimi/edge/systemstates/edge-1713770966','/aimi/edge/injectorstates/edge-1713770966','/aimi/edge/states','/aimi/edge/oillog/edge-1713770966'], (topic, message) => {
startMqtt(['/aimi/edge/#'], (topic, message) => {
  console.log(`来自:${topic}的消息:${JSON.parse(message)}`)

  const msg = JSON.parse(message.toString());

  // console.log(msg);
  if (msg !== '') {
    switch (topic) {

      case '/aimi/edge/injectorstates/edge-12345678':
        console.log(msg, '1')
        injectorstates.value = msg
        break;

      case '/aimi/edge/injectorstates/edge-1713770966':
        console.log(msg, '2')
        edgeInjectorstates.value = msg

        break;
      case '/aimi/edge/states':
        console.log(msg, '3')
        // edgeInjectorstates.value = msg

        break;
      case '/aimi/edge/oillog/edge-1713770966':
        console.log(msg, '4')
        // edgeInjectorstates.value = msg

        break;
      case '/aimi/edge/oillog/edge-12345678':
        console.log(msg, '5')
        // edgeInjectorstates.value = msg

        break;
      case '/aimi/edge/devinfo/edge-1713770966':
        console.log(msg, '6')
        // edgeInjectorstates.value = msg

        break;
      case '/aimi/edge/systemstates/edge-1713770966':
        console.log(msg, '7')
        systemstates.value = msg

        break;

    }
  }

});

onMounted(() => {


})
</script>
<style lang="less" scoped>
.main {
  .ant-row {
    display: flex;
    flex-flow: row wrap;
    min-width: 0;

    .ant-col {
      position: relative;
      max-width: 100%;
      min-height: 1px;
    }

    .ant-col-6 {
      display: block;
      flex: 0 0 25%;
      max-width: 25%;
    }
  }
}
</style>